<script lang="ts" setup>
import type {
  ProgressBarShape,
  ProgressBarThickness,
  ProgressBarValidationState,
} from '@fluentui/web-components';

withDefaults(
  defineProps<{
    max?: number;
    min?: number;
    shape?: ProgressBarShape;
    thickness?: ProgressBarThickness;
    validationState?: ProgressBarValidationState | undefined;
    value?: number;
  }>(),
  {
    value: undefined,
    min: undefined,
    max: undefined,
    thickness: 'medium',
    shape: 'rounded',
    validationState: undefined,
  },
);

const emit = defineEmits<{
  change: [event: Event];
}>();
function handleChange(event: Event) {
  emit('change', event);
}
</script>

<template>
  <fluent-progress-bar
    :value="value"
    :min="min"
    :max="max"
    :thickness="thickness"
    :shape="shape"
    :validation-state="validationState"
    @change="handleChange"
  >
    <slot></slot>
  </fluent-progress-bar>
</template>

<style scoped></style>
